<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Tre Menu - Make menus that expand when clicked</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="TreeMenu creates tree menus out of UL/LI tags that pop open when clicked.">
<meta name="author" content="Mack Pexton">
<link rel="stylesheet" href="acmebase.css" type="text/css">

<style type="text/css">
/* Menu container */
.menu	{
	width:300px;
	height:175px;
	border:solid #FF9900 1px;
	padding:10px 5px 10px 5px;
	margin:12px 12px 12px 50px;
	}

/* Menu styles */
.menu ul
	{
	margin:0px;
	padding:0px;
	text-decoration:none;
	}
.menu li
	{
	margin:0px 0px 0px 5px;
	padding:0px;
	list-style-type:none;
	text-align:left;
	font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	font-weight:normal;
	}

/* Submenu styles */
.menu ul ul 
	{
	background-color:#F6F6F6;
	}
.menu li li
	{
	margin:0px 0px 0px 16px;
	}

/* Symbol styles */
.menu .symbol-item,
.menu .symbol-open,
.menu .symbol-close
	{
	float:left;
	width:16px;
	height:1em;
	background-position:left center;
	background-repeat:no-repeat;
	}
.menu .symbol-item  { background-image:url(icons/page.png); }
.menu .symbol-close { background-image:url(icons/plus.png);}
.menu .symbol-open  { background-image:url(icons/minus.png); }
.menu .symbol-item.last  { }
.menu .symbol-close.last { }
.menu .symbol-open.last  { }

/* Menu line styles */
.menu li.item  { font-weight:normal; }
.menu li.close { font-weight:normal; }
.menu li.open  { font-weight:bold; }
.menu li.item.last  { }
.menu li.close.last { }
.menu li.open.last  { }

a.go:link, a.go:visited, a.go:active
        {
        display:block;
        height:26px;
        width:100px;
        background-color:#FFFFFF;
        color:#333333;
        font-family:Arial,Helvetica,sans-serif;
        font-size:12px;
        font-weight:bold;
        text-align:right;
        text-decoration:none;
        line-height:26px;
        padding-right:30px;
        background-image:url(go.gif);
        background-position:right;
        background-repeat:no-repeat;
        }
a.go:hover
        {
        text-decoration:none;
        color:#488400;
        }
#example3 { width:40%; background-color:#F9F9F9; padding:0px; margin-left:24px; }
#example3 li { list-style:none; margin:1px 0px; }
#example3 li a { display:block; height:16px; padding:0px 4px; background-color:#EEEEFF; }
#example3 li ul { margin:0px; padding:0px; }
#example3 li ul li a { background-color:#F9F9F9; border-bottom: solid #ECECEC 1px; padding-left:20px; }
</style>

<script src="TreeMenu.js" type="text/javascript"></script>
</head>

<body>
<a name="top"></a></p>
<a href="javascript:void 0" onclick="TreeMenu.toggle(this)">JavaScript</a>
  <ul>
    <li><a href='http://javascript.internet.com/'>JavaScript Source</a></li>
    <li><a href='http://www.webreference.com/js/'>WebReference JavaScript Articles</a></li>
    <li><a href='http://www.javascript.com/'>JavaScript.com</a></li>
  </ul>
<ul id="example2">
  <li><a href="javascript:void 0" onclick="TreeMenu.toggle(this)">Web Development</a>
    <ul>
      <li><a href='http://www.webreference.com/'>Web Reference</a></li>
      <li><a href='http://www.webdeveloper.com/'>Web Developer</a></li>
      <li><a href='http://wdvl.com/'>WDVL</a></li>
    </ul>
  </li>
  <li><a href="javascript:void 0" onclick="TreeMenu.toggle(this)">Forums</a>
    <ul>
      <li><a href='http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=5'>XML</a></li>
      <li><a href='http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=2'>HTML</a></li>
      <li><a href='http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=3'>JavaScript</a></li>
      <li><a href='http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=4'>Perl</a></li>
      <li><a href='http://www.webdeveloper.com/forum/forumdisplay.php?s=&forumid=16'>PHP</a></li>
    </ul>
  </li>
  <li><a href="javascript:void 0" onclick="TreeMenu.toggle(this)">Miscellaneous Web Sites</a>
    <ul>
      <li><a href='http://www.thecounter.com/'>The Counter</a></li>
      <li><a href='http://www.theguestbook.com/'>The Guestbook</a></li>
      <li><a href='http://www.thelist.com/'>The List of ISPs</a></li>
      <li><a href='http://jobs.internet.com/'>Internet Jobs</a></li>
    </ul>
  </li>
</ul>
<script type="text/javascript">make_tree_menu('example2',1);</script>

<p><a name="example-3" href="#top" class="h3br" title="Top of page."><img src="top.gif" border="0" alt="Top"></a></p>
<h3>&nbsp;</h3>
</body>
</html>
